<template>
	<MyDialog v-model="show" title="添加学生" @confirm="formSubmit">
		<div style="position: relative;">
			<label style=" margin: 20px 0px 0px 10px;display: inline-block;">学生姓名:（中间以空格隔开或者每行一个）</label>
			<el-input v-model="studentName" maxlength="350" style="width: 95%;margin: 15px auto;"
				:autosize="{ minRows:8, maxRows: 8 }" type="textarea" placeholder="如: 张三 李四 王五" />
			<div style="position: absolute;right: 24px;top: 215px;color: #303133;">
				{{studentNameLength}}<label style="color: #909399;">/350</label>
			</div>
		</div>

		<div style="margin: auto;display: flex;">


			<el-button @click="addqrcode" type="primary" plain size="small" style="margin: 15px 0 15px 0"
				:color="styleObject.buttonColor">二维码邀请加入</el-button>

			<el-upload :action="$store.state.pyurl+'/file/find'" style="margin: 15px"
				:color="styleObject.buttonColor" :data="uploadImageData" name="images" :show-file-list="false" :on-success="addImage"
				:on-error="onImageError">
				<el-button type="primary" plain size="small" 
					:color="styleObject.buttonColor">图像识别一键加入</el-button>
			</el-upload>

			<el-button @click="fileUploadShow = true" type="primary" size="small" plain style="margin: 15px 0 "
				:color="styleObject.buttonColor">文件一键导入(支持设置学号)</el-button>
		</div>

		<MyDialog v-model="fileUploadShow" title="文件一键导入" :slot-show="false">
			<div style="display:flex;padding-left: 68px;">
				<el-link type="primary"
					href="https://www.yaojiapx.cn/webs/%E6%89%B9%E9%87%8F%E4%B8%8A%E4%BC%A0%E5%AD%A6%E7%94%9F(%E5%AD%A6%E5%8F%B7%E9%80%89%E5%A1%AB).txt"
					customStyle="width:122px;margin: 0 auto;" target="_blank" download="文本文档模板.txt">下载txt文本文档模板</el-link>
				<el-link type="primary"
					href="https://www.yaojiapx.cn/webs/%E6%89%B9%E9%87%8F%E4%B8%8A%E4%BC%A0%E5%AD%A6%E7%94%9F(%E5%AD%A6%E5%8F%B7%E9%80%89%E5%A1%AB).xlsx"
					style="width:132px;margin: 0 15px;">下载excel表格模板</el-link>
			</div>

			<div style="width:70%;margin:20px auto 0;">
				<el-text>1.文件导入支持设置学生姓名、学号。学号为纯数字</el-text>
				<el-text>2.重复导入相同学生信息,可以覆盖之前未设置学号的学生信息。</el-text>
				<el-text>3.同名学生需手动处理学号。</el-text>
			</div>

			<div style="width:70%;margin: 20px auto 0;">
				<el-upload text="选择文件一键导入" :action="$store.state.url+'/student/addManyStudent'" customStyle="margin: 15px auto"
					:color="styleObject.buttonColor" :data="uploadData" :show-file-list="false" :on-success="addFile"
					:on-error="onError">
					<el-button type="primary" plain customStyle="margin: 15px auto"
						:color="styleObject.buttonColor">选择文件一键导入</el-button>
				</el-upload>
			</div>
		</MyDialog>

		<PreviewImage v-if="previewImageShow" :src="imageSrc" :srcList="imageSrcList" @close="previewImageShow = false">
		</PreviewImage>

	</MyDialog>
</template>

<script>
	var that;
	import myMixin from '@/utils/myMixin.js'
	import MyDialog from '@/components/MyDialog.vue'
	import PreviewImage from '@/components/PreviewImage.vue'
	import {
		confirmMessage,
		hintMessage,
		warningMessage
	} from '@/utils/index.js'
	import {
		nextTick
	} from 'vue';
	export default {
		mixins: [myMixin], //混入
		components: {
			MyDialog,
			PreviewImage
		},
		data() {
			return {
				imageSrc: '',
				imageSrcList: [],
				previewImageShow: false,
				show: true,
				studentName: '',
				id: '',
				fileUploadShow: false, //文件上传弹窗
				uploadData: {
					classname: '',
					code: '',
				},
				uploadImageData: {
					'type': '1',
					'text': 1
				}
			}
		},
		mounted() {
			that = this;
			// that.id = options.schoolid;
			that.uploadData.code = that.$store.state.$userInfo.id;
		},
		computed: {
			studentNameLength() {
				return this.studentName.length;
			}
		},
		watch: {
			show(news) {
				this.$emit("close")
			},
		},
		methods: {
			onError() {
				warningMessage("请重试！");
			},
			//上传文件
			addFile(resp) {
				console.log(resp);
				hintMessage("添加成功");
			},
			onImageError() {
				warningMessage("没有检测到文字，请重试！");
			},
			// 图片识别一键加入
			addImage(resp) {
				console.log(resp);
				that.studentName = resp.data.join(" ")
				hintMessage("加载成功");
			},
			async addqrcode() {
				let data = await that.$asyncHttpConfig({
					url: that.$store.state.url + '/qiandao/queryClassName',
					data: {
						code: that.$store.state.$userInfo.id,
						hid: that.uploadData.classname
					},
				})

				that.previewImageShow = true;
				nextTick(() => {
					that.imageSrc = that.$store.state.imageurl + data.image;
					that.imageSrcList = [that.$store.state.imageurl + data.image];
				})

			},
			//添加學生
			async formSubmit() {
				if (that.studentName.length == 0) {
					warningMessage('提示：学生姓名不能为空')
				} else {

					await that.$asyncHttpConfig({
						url: that.$store.state.url + '/student/addOrUpdate',
						data: {
							classname: that.uploadData.classname,
							code: that.$store.state.$userInfo.id,
							studentname: that.studentName
						},
					})

					that.studentName = ''
					hintMessage('提示：添加成功')


				}

			},
		}
	}
</script>

<style>
</style>